/*
dialog.css
============
This file styles dialogs and all widgets available inside of it (tabs, buttons,
fields, etc.).
Dialogs are a complex system because they're very flexible. The CKEditor API
makes it easy to create and customize dialogs by code, by making use of several
different widgets inside its contents.
All dialogs share a main dialog strucuture, which can be visually represented
as follows:
+-- .ved_dialog -------------------------------------------------+
| +-- .ved_dialog_body ----------------------------------------+ |
| | +-- .ved_dialog_title --+ +-- .ved_dialog_close_button --+ | |
| | |                       | |                              | | |
| | +-----------------------+ +------------------------------+ | |
| | +-- .ved_dialog_tabs ------------------------------------+ | |
| | |                                                        | | |
| | +--------------------------------------------------------+ | |
| | +-- .ved_dialog_contents --------------------------------+ | |
| | | +-- .ved_dialog_contents_body -----------------------+ | | |
| | | |                                                    | | | |
| | | +----------------------------------------------------+ | | |
| | | +-- .ved_dialog_footer ------------------------------+ | | |
| | | |                                                    | | | |
| | | +----------------------------------------------------+ | | |
| | +--------------------------------------------------------+ | |
| +------------------------------------------------------------+ |
+----------------------------------------------------------------+
Comments in this file will give more details about each of the above blocks.
*/
/* The outer container of the dialog. */
.ved_dialog {
	/* Mandatory: Because the dialog.css file is loaded on demand, we avoid
	   showing an unstyled dialog by hidding it. Here, we restore its visibility. */
	visibility: visible;
}
.ved_dialog td.bgtop {   background:  url(../../i/bgtop.png) repeat-x; }
.ved_dialog td.bgbot {   background:  url(../../i/bgtbot.png) repeat-x; }
.ved_dialog td.bgleft {  background:  url(../../i/bgleft.png) repeat-y; }
.ved_dialog td.bgright { background:  url(../../i/bgright.png) repeat-y; }
.ved_dialog td.bgw { background: #FFF; }
.ved_dialog td.c1 { background:  url(../../i/popcrn.png) no-repeat; }
.ved_dialog td.c2 { background:  url(../../i/popcrn2.png) no-repeat; }
.ved_dialog td.c3 { background:  url(../../i/popcrn3.png) no-repeat; }
.ved_dialog td.c4 { background:  url(../../i/popcrn4.png) no-repeat; }

/* The inner boundary container. */
.ved_dialog_body {
  background-color: #fff;
  margin-top: 20px;
	z-index: 1;
}
/* Due to our reset we have to recover the styles of some elements. */
.ved_dialog strong {
	font-weight: bold;
}
/* The dialog title. */
.ved_dialog_title {
	font-size: 18px;
	color: #999;
	cursor: move;
	margin-top: -3px;
	position: relative;
}
.ved_ltr .ved_dialog_title {
	float: left;
}
.ved_rtl .ved_dialog_title {
	float: right;
}
/* The outer part of the dialog contants, which contains the contents body
   and the footer. */
.ved_dialog_contents {
	background-color: #fff;
	overflow: auto;
	padding: 17px 10px 5px 10px;
	margin-top: 7px;
}
/* The contents body part, which will hold all elements available in the dialog. */
.ved_dialog_contents_body
{
	overflow: auto;
	padding: 0 5px;
	/*margin-top: 22px;*/
}
/* The dialog footer, which usually contains the "Ok" and "Cancel" buttons as
   well as a rsizer handle. */
.ved_dialog_footer
{
	text-align: center;
}
.ved_rtl .ved_dialog_footer
{
	text-align: left;
}
.ved_dialog_footer .ved_resizer
{
	margin-top: 24px;
}
.ved_dialog_footer .ved_resizer_ltr
{
	border-right-color: #ccc;
}
.ved_dialog_footer .ved_resizer_rtl
{
	border-left-color: #ccc;
}
.ved_hc .ved_dialog_footer .ved_resizer
{
	margin-bottom: 1px;
}
.ved_hc .ved_dialog_footer .ved_resizer_ltr
{
	margin-right: 1px;
}
.ved_hc .ved_dialog_footer .ved_resizer_rtl
{
	margin-left: 1px;
}
/*
Dialog tabs
-------------
Tabs are presented on some of the dialogs to make it possible to have its
contents split on different groups, visible one after the other.
The main element that holds the tabs can be made hidden, in case of no tabs
available.
The following is the visual representation of the tabs block:
+-- .ved_dialog_tabs ------------------------------------+
|  +-- .ved_dialog_tab --+ +-- .ved_dialog_tab --+ ...   |
|  |                     | |                     |       |
|  +---------------------+ +---------------------+       |
+--------------------------------------------------------+
The .ved_dialog_tab_selected class is appended to the active tab.
*/
/* The main tabs container. */
.ved_dialog_tabs {
  border-bottom: 1px solid #ccc;
	display: block;
	height: 22px;
	margin-top: 25px;
	padding-left:10px;
	padding-right:10px;
	z-index: 2;
}
.ved_rtl .ved_dialog_tabs {
	right: 10px;
}
/* A single tab (an <a> element). */
a.ved_dialog_tab {
	background-color: #ebebeb;
	height: 14px;
	padding: 4px 8px;
	display: inline-block;
	cursor: pointer;
}
a.ved_dialog_tab:hover {
	background-color: #f1f1e3;
}
.ved_hc a.ved_dialog_tab:hover {
	padding: 2px 6px !important;
	border-width: 3px;
}
a.ved_dialog_tab_selected {
  background-color: #ccc;
	cursor: default;
}
.ved_hc a.ved_dialog_tab_selected {
	padding: 2px 6px !important;
	border-width: 3px;
}
/* The .ved_single_page class is appended to the dialog outer element in case
   of dialogs that has no tabs. */
.ved_single_page .ved_dialog_tabs {
	display: none;
}
.ved_single_page .ved_dialog_contents {
	padding-top: 5px;
	margin-top: 10px;
}
/* The close button at the top of the dialog. */
.ved_dialog_close_button {
	cursor: pointer;
}
.ved_ltr .ved_dialog_close_button {
	float: right;
}
.ved_rtl .ved_dialog_close_button {
	float: left;
}

/*
Dialog UI Elements
--------------------
The remaining styles define the UI elements that can be used inside dialog
contents.
Most of the UI elements on dialogs contain a textual label. All of them share
the same labelling structure, having the label text inside an element with
.ved_dialog_ui_labeled_label and the element specific part inside the
.ved_dialog_ui_labeled_content class.
*/
/* If an element is supposed to be disabled, the .ved_disabled class is
   appended to it. */
div.ved_disabled .ved_dialog_ui_labeled_content *
{
	background-color : #a0a0a0;
	cursor : default;
}
/*
Horizontal-Box and Vertical-Box
---------------------------------
There are basic layou element used by the editor to properly align elements in
the dialog. They're basically tables that have each cell filled by UI elements.
The following is the visual representation of a H-Box:
+-- .ved_dialog_ui_hbox --------------------------------------------------------------------------------+
|  +-- .ved_dialog_ui_hbox_first --+ +-- .ved_dialog_ui_hbox_child --+ +-- .ved_dialog_ui_hbox_last --+ |
|  +                               + +                               + +                              + |
|  +-------------------------------+ +-------------------------------+ +------------------------------+ |
+-------------------------------------------------------------------------------------------------------+
It is possible to have nested V/H-Boxes.
*/
.ved_dialog_ui_vbox table,
.ved_dialog_ui_hbox table
{
	margin: auto;
}
.ved_dialog_ui_vbox_child
{
	padding: 2px 0px;
}
.ved_dialog_ui_hbox
{
	width: 100%;
}
.ved_dialog_ui_hbox_first,
.ved_dialog_ui_hbox_child,
.ved_dialog_ui_hbox_last
{
	vertical-align: top;
}
.ved_ltr .ved_dialog_ui_hbox_first,
.ved_ltr .ved_dialog_ui_hbox_child
{
	padding-right: 10px;
}
.ved_rtl .ved_dialog_ui_hbox_first,
.ved_rtl .ved_dialog_ui_hbox_child
{
	padding-left: 10px;
}
/*
Text Input
------------
The basic text field to input text.
+-- .ved_dialog_ui_text --------------------------+
|  +-- .ved_dialog_ui_labeled_label ------------+ |
|  |                                            | |
|  +--------------------------------------------+ |
|  +-- .ved_dialog_ui_labeled_content ----------+ |
|  | +-- div.ved_dialog_ui_input_text --------+ | |
|  | | +-- input.ved_dialog_ui_input_text --+ | | |
|  | | |                                    | | | |
|  | | +------------------------------------+ | | |
|  | +----------------------------------------+ | |
|  +--------------------------------------------+ |
+-------------------------------------------------+
*/
input.ved_dialog_ui_input_text,
input.ved_dialog_ui_input_password {
	background-color: white;
	border: none;
	padding: 0px;
	width: 100%;
	/*height: 14px;*/
}
div.ved_dialog_ui_input_text,
div.ved_dialog_ui_input_password {
	background-color: white;
	border: 1px solid #7f9db9;
	padding: 2px;
}
/*
Textarea
----------
The textarea field to input larger text.
+-- .ved_dialog_ui_textarea --------------------------+
|  +-- .ved_dialog_ui_labeled_label ----------------+ |
|  |                                                | |
|  +------------------------------------------------+ |
|  +-- .ved_dialog_ui_labeled_content --------------+ |
|  | +-- div.ved_dialog_ui_input_textarea --------+ | |
|  | | +-- input.ved_dialog_ui_input_textarea --+ | | |
|  | | |                                        | | | |
|  | | +----------------------------------------+ | | |
|  | +--------------------------------------------+ | |
|  +------------------------------------------------+ |
+-----------------------------------------------------+
*/
textarea.ved_dialog_ui_input_textarea {
	background-color: white;
	border: none;
	padding: 0px;
	width: 100%;
	overflow: auto;
	resize: none;
}
div.ved_dialog_ui_input_textarea {
	background-color: white;
	border: 1px solid #7f9db9;
	padding: 1px 0px;
}
/*
Button
--------
The buttons used in the dialog footer or inside the contents.
+-- a.ved_dialog_ui_button -------------+
| +--- div ---------------------------+ |
| | +-- span.ved_dialog_ui_button --+ | |
| | |                               | | |
| | +-------------------------------+ | |
| +-----------------------------------+ |
+---------------------------------------+
*/
/* The outer part of the button. */
a.ved_dialog_ui_button {
	border-collapse: separate;
	cursor: default;
	background: transparent url(../../i/button.gif) no-repeat scroll 0 0;
	display: inline-block;
}

/* The inner part of the button. */
a.ved_dialog_ui_button div {
	background: transparent url(../../i/button.gif) no-repeat scroll 100% -21px;
	padding: 0 10px;
}
a.ved_dialog_ui_button span {
	background: transparent url(../../i/button.gif) repeat-x scroll 0 -378px;
	font-size: 11px;
	padding: 3px 0 4px;
	text-align: center;
	text-transform: lowercase;
	display: block;
	cursor: pointer;
}

/* Special class appended to the Ok and Cancel buttons. */
a.ved_dialog_ui_button_ok, a.ved_dialog_ui_button_cancel {
	background-position: 0 -504px;
}
a.ved_dialog_ui_button_ok div, a.ved_dialog_ui_button_cancel div {
	background-position: 100% -585px;
}
a.ved_dialog_ui_button_ok span, a.ved_dialog_ui_button_cancel span {
	background-position: 0 -666px;
	display: block;
	font-family: Tahoma;
	font-size: 17px;
	line-height: 1;
	padding: 5px 20px;
	text-transform: none;
	width: 60px;
}

/* .ved_disabled is appended to disabled buttons */
a.ved_dialog_ui_button:hover,a.ved_dialog_ui_button:focus,a.ved_dialog_ui_button:active {
	background-position: 0 -84px;
}
a.ved_dialog_ui_button:hover div,a.ved_dialog_ui_button:focus div,a.ved_dialog_ui_button:active div {
	background-position: 100% -105px;
}
a.ved_dialog_ui_button:hover span,a.ved_dialog_ui_button:focus span,a.ved_dialog_ui_button:active span {
	background-position: 0 -420px;
}

a.ved_dialog_ui_button_ok:hover,a.ved_dialog_ui_button_ok:focus,a.ved_dialog_ui_button_ok:active,
a.ved_dialog_ui_button_cancel:hover,a.ved_dialog_ui_button_cancel:focus,a.ved_dialog_ui_button_cancel:active {
	background-position: 0 -531px;
}
a.ved_dialog_ui_button_ok:hover div,a.ved_dialog_ui_button_ok:focus div,a.ved_dialog_ui_button_ok:active div,
a.ved_dialog_ui_button_cancel:hover div,a.ved_dialog_ui_button_cancel:focus div,a.ved_dialog_ui_button_cancel:active div {
	background-position: 100% -612px;
}
a.ved_dialog_ui_button_ok:hover span,a.ved_dialog_ui_button_ok:focus span,a.ved_dialog_ui_button_ok:active span,
a.ved_dialog_ui_button_cancel:hover span,a.ved_dialog_ui_button_cancel:focus span,a.ved_dialog_ui_button_cancel:active span {
	background-position: 0 -693px;
}

a.ved_dialog_ui_button.ved_disabled {
	background-position: 0 -42px;
}
a.ved_dialog_ui_button.ved_disabled div {
	background-position: 100% -63px;
}
a.ved_dialog_ui_button.ved_disabled span {
	background-position: 0 -399px;
	color: #bcbcbc;
}

a.ved_dialog_ui_button_ok.ved_disabled, a.ved_dialog_ui_button_cancel.ved_disabled {
	background-position: 0 -558px;
}
a.ved_dialog_ui_button_ok.ved_disabled div, a.ved_dialog_ui_button_cancel.ved_disabled div {
	background-position: 100% -639px;
}
a.ved_dialog_ui_button_ok.ved_disabled span, a.ved_dialog_ui_button_cancel.ved_disabled span {
	background-position: 0 -720px;
}

.ved_hc a.ved_dialog_ui_button:hover, .ved_hc a.ved_dialog_ui_button:focus, .ved_hc a.ved_dialog_ui_button:active {
	border-width: 2px;
}
/* A special container that holds the footer buttons. */
.ved_dialog_footer_buttons
{
	display: inline-table;
	margin: 6px 12px 0 12px;
	width: auto;
	position: relative;
}
.ved_dialog_footer_buttons span.ved_dialog_ui_button
{
	text-align: center;
}
/*
Styles for other dialog element types.
*/
div.ved_dialog_ui_input_select {
	border: none;
	background-color: white;
}
select.ved_dialog_ui_input_select {
	border: 1px solid #7f9db9;
	background-color: white;
}
.ved_dialog_ui_input_file {
	width: 100%;
	height: 25px;
}
/*
 * Some utility CSS classes for dialog authors.
 */
.ved_dialog .ved_dark_background
{
	background-color: #eaead1;
}
.ved_dialog .ved_light_background
{
	background-color: #ffffbe;
}
.ved_dialog .ved_centered
{
	text-align: center;
}
.ved_dialog a.ved_btn_reset
{
	float: right;
	background-position: 0 -32px;
	background-image: url(images/mini.gif);
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	border: 1px none;
	font-size: 1px;
}
.ved_rtl .ved_dialog a.ved_btn_reset
{
	float: left;
}
.ved_dialog a.ved_btn_locked,
.ved_dialog a.ved_btn_unlocked
{
	float: left;
	background-position: 0 0;
	background-image: url(images/mini.gif);
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	border: none 1px;
	font-size: 1px;
}
.ved_dialog a.ved_btn_locked .ved_icon
{
	display:none;
}
.ved_rtl .ved_dialog a.ved_btn_locked,
.ved_rtl .ved_dialog a.ved_btn_unlocked
{
	float: right;
}
.ved_dialog a.ved_btn_unlocked
{
	background-position: 0 -16px;
	background-image: url(images/mini.gif);
}
.ved_dialog .ved_btn_over
{
	border: outset 1px;
	cursor: pointer;
}
/*
The rest of the file contains style used on several common plugins. There is a
tendency that these will be moved to the plugins code in the future.
*/
.ved_dialog  .ImagePreviewBox
{
	border : 2px ridge black;
	overflow : scroll;
	height : 200px;
	width : 300px;
	padding : 2px;
	background-color : white;
}
.ved_dialog .ImagePreviewBox table td {
	white-space: normal;
}
.ved_dialog  .ImagePreviewLoader
{
	position: absolute;
	white-space : normal;
	overflow : hidden;
	height : 160px;
	width : 230px;
	margin : 2px;
	padding : 2px;
	opacity : 0.9;
	filter : alpha(opacity=90);
	background-color : #e4e4e4;
}
.ved_dialog  .FlashPreviewBox
{
	white-space : normal;
	border : 2px ridge black;
	overflow : auto;
	height : 160px;
	width : 390px;
	padding : 2px;
	background-color : white;
}
.ved_dialog .ved_pastetext
{
	width: 346px;
	height: 170px;
}
.ved_dialog .ved_pastetext textarea
{
	width: 340px;
	height: 170px;
	resize: none;
}
.ved_dialog iframe.ved_pasteframe {
	width: 600px;
	height: 350px;
	background-color: white;
	border: 1px solid #7f9db9;
}
.ved_dialog .ved_hand
{
	cursor: pointer;
}
.ved_disabled
{
	color: #a0a0a0;
}
/*
High Contrast Mode.
*/
.ved_hc .ved_dialog_title,
.ved_hc .ved_dialog_tabs,
.ved_hc .ved_dialog_contents,
.ved_hc .ved_dialog_footer
{
	border-left: 1px solid;
	border-right: 1px solid;
}
.ved_hc .ved_dialog_title
{
	border-top: 1px solid;
}
.ved_hc .ved_dialog_footer
{
	border-bottom: 1px solid;
}
.ved_hc .ved_dialog_close_button span
{
	display: inline;
	cursor: pointer;
	font-weight: bold;
	position: relative;
	top: 3px;
}
.ved_dialog_body .ved_label
{
	display: none;
}
.ved_dialog_body label {
	color: #666;
	font-size: 12px;
	display: inline;
	margin-bottom: auto;
	cursor: default;
}
.ved_dialog_body label.ved_required
{
	font-weight: bold;
}
.ved_hc .ved_dialog_body .ved_label
{
	display: inline;
	cursor: inherit;
}
.ved_hc a.ved_btn_locked,
.ved_hc a.ved_btn_unlocked,
.ved_hc a.ved_btn_reset
{
	border-style: solid;
	float: left;
	width: auto;
	height: auto;
	padding: 0 2px;
}
.ved_rtl.ved_hc a.ved_btn_locked,
.ved_rtl.ved_hc a.ved_btn_unlocked,
.ved_rtl.ved_hc a.ved_btn_reset
{
	float: right;
}
.ved_hc a.ved_btn_locked .ved_icon
{
	display:inline;
}
a.ved_smile img
{
	/* IE6 does not support transparent borders */
	border: 2px solid #eaead1;
}
a.ved_smile:focus img,
a.ved_smile:active img,
a.ved_smile:hover img
{
	border-color: #C7C78F;
}
.ved_hc .ved_dialog_tabs a,
.ved_hc .ved_dialog_footer a
{
	opacity: 1.0;
	filter: alpha(opacity=100);
	border: 1px solid white;
}
.ved_hc .ImagePreviewBox
{
	width: 260px;
}
/**
 * Styles specific to "cellProperties" dialog.
 */
.ved_dialog_contents a.colorChooser
{
	display:block;
	margin-top:6px;
	margin-left: 10px;
	width: 80px;
}
.ved_rtl .ved_dialog_contents a.colorChooser
{
	margin-right: 10px;
}
/* Compensate focus outline for some input elements. (#6200) */
.ved_dialog_ui_checkbox_input:focus,
.ved_dialog_ui_radio_input:focus,
.ved_dialog_ui_input_select:focus,
.ved_btn_over
{
	outline: 1px dotted #696969;
}
.ved_iframe_shim
{
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	filter:alpha(opacity=0);
	width:100%;
	height:100%;
}
